<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>参数</title>
    <script type="text/javascript" src="./js/jquery-2.0.3.js"></script>
    <script type="text/javascript" src="./js/index.js"></script>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #fff;
            font-family: "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei", "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif;
        }

        main {
            width: 100%;
            background-color: #fff;
            /*box-shadow: 0px 3px 4px #eeeeee;*/
            position: relative;
        }
        /*顶部导航栏*/

        header {
            width: 100%;
            height: 40px;
            min-width: 1226px;
            background-color: #333333;
        }

        nav {
            width: 1226px;
            margin: auto;
            background-color: #333333;
            box-sizing: border-box;
        }

        .top-ul {
            list-style-type: none;
        }

        .top-li {
            float: left;
        }

        .top-li a {
            text-decoration: none;
            line-height: 40px;
            color: #b0b0b0;
            font-size: 12px;
            padding: 0 6px;
            border-right: 1px solid #423d39;
        }

        .top-li:nth-of-type(1) a {
            padding: 0;
            padding-right: 8px;
        }

        .top-li:last-child a {
            border: none;
        }

        .top-li a:hover {
            color: #fff;
        }

        .top-right {
            float: right;
            position: relative;
            background-color: #333333;
        }

        .top-right span {
            color: #b0b0b0;
            font-size: 12px;
            line-height: 40px;
            cursor: pointer;
        }

        .top-right-one,
        .top-right-two {
            padding: 0 4px;
            border-right: 1px solid #423d39;
        }

        .top-right-three {
            display: inline-block;
            margin-right: 20px;
            padding-left: 7px;
        }

        .top-right-one:hover {
            color: #FFF;
        }

        .top-right-two:hover {
            color: #FFF;
        }

        .top-right-three:hover {
            color: #fff;
        }

        .top-right-four:hover {
            background-color: #fff;
            color: #ff6700;
        }

        .top-right-four {
            display: inline-block;
            width: 120px;
            height: 40px;
            background-color: #424242;
            text-align: center;
            background-image: url('./index-images/buy.png');
            background-repeat: no-repeat;
            background-position: 10px 12px;
        }

        .top-right-four:hover {
            background-image: url('./index-images/buy2.png');
        }

        .shop {
            width: 318px;
            height: 100px;
            position: absolute;
            top: 40px;
            right: 0px;
            z-index: 10;
            background-color: #fff;
            border: 1px solid #e0e0e0;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
            box-sizing: border-box;
            text-align: center;
            font-size: 12px;
            line-height: 100px;
            color: #424242;
            display: none;
        }
        /*第二个导航区域*/

        .content_1 {
            width: 1226px;
            height: 100px;
            margin: auto;
            min-width: 1226px;
        }

        .content_1-logo {
            width: 55px;
            height: 55px;
            float: left;
            margin-top: 22.5px;
            margin-right: 15px;
            cursor: pointer;
        }

        .content_1-logo img {
            width: 55px;
            height: 55px;
        }

        .content_1-pro {
            float: left;
            margin-top: 17px;
            margin-right: 11px;
            cursor: pointer;
        }

        .content_1-ul {
            list-style-type: none;
        }

        .content_1-li {
            float: left;
            line-height: 100px;
            color: #333333;
        }

        .content_1-li a {
            display: inline-block;
            height: 100px;
            text-decoration: none;
            color: #333333;
            font-size: 16px;
            margin-right: 20px;
        }

        .content_1-li a:hover {
            color: #ff6700;
        }

        .content_1-search {
            float: right;
            margin-top: 25px;
            position: relative;
            width: 295px;
            height: 50px;
            z-index: 9;
        }

        .content_1-search input[type="text"] {
            width: 295px;
            height: 50px;
            border: 1px solid #e0e0e0;
            padding: 10px;
            box-sizing: border-box;
        }

        .content_1-search input[type="text"]:hover {
            border-color: #b0b0b0;
        }

        .content_1-search-one {
            display: inline-block;
            text-decoration: none;
            color: #757575;
            font-size: 12px;
            text-align: center;
            background-color: #eeeeee;
            width: 100px;
            height: 18px;
            position: absolute;
            top: 16px;
            left: 48px;
        }

        .content_1-search-two {
            display: inline-block;
            text-decoration: none;
            color: #757575;
            font-size: 12px;
            text-align: center;
            background-color: #eeeeee;
            width: 84px;
            height: 18px;
            position: absolute;
            top: 16px;
            right: 60px;
        }

        .content_1-search-one:hover {
            color: #fff;
            background-color: #ff6700;
        }

        .content_1-search-two:hover {
            color: #fff;
            background-color: #ff6700;
        }

        .content_1-search .content_1-search-p {
            position: absolute;
            top: 0;
            right: 0;
            width: 50px;
            height: 50px;
            text-align: center;
            border-left: 1px solid #e0e0e0;
            box-sizing: border-box;
            background-image: url('./index-images/search.png');
            background-repeat: no-repeat;
            background-position: 15px 16px;
        }

        .content_1-search-p:hover {
            background-color: #ff6700;
            color: #fff;
            background-image: url('./index-images/search2.png');
        }

        .keyword-search {
            width: 246px;
            height: 291px;
            border: 1px solid #ff6700;
            border-top: none;
            box-sizing: border-box;
            z-index: 9999;
            background-color: #fff;
            display: none;
        }

        .keyword-search .keyword-search-list {
            list-style-type: none;
            z-index: 9999;
        }

        .keyword-search .keyword-search-list li a {
            display: block;
            position: relative;
            padding: 6px 15px;
            font-size: 12px;
            color: #424242;
            text-decoration: none;
        }

        .keyword-search-list span {
            position: absolute;
            font-size: 12px;
            color: #b0b0b0;
            right: 15px;
        }

        .keyword-search .keyword-search-list li a:hover {
            background-color: #fafafa;
        }
        /*第二部分下拉菜单*/

        .content_1-menu {
            width: 100%;
            min-width: 1226px;
            height: 230px;
            border-top: 1px solid #e0e0e0;
            box-sizing: border-box;
            box-shadow: 0px 3px 4px #cccccc;
            background-color: #fff;
            display: none;
            position: absolute;
            top: 140px;
            left: 0px;
            z-index: 10000;
        }

        .container-menu {
            width: 1226px;
            margin: auto;
            position: relative;
        }

        .container-menu ul {
            list-style-type: none;
            margin-left: 15px;
            position: absolute;
        }

        .container-menu ul li {
            float: left;
            padding: 35px 12px 0;
            text-align: center;
            font-size: 12px;
        }

        .container-menu ul li div {
            border-right: 1px solid #e0e0e0;
        }

        .container-menu ul li:last-child div {
            border: none;
        }

        .container-menu ul li p {
            line-height: 20px;
        }

        .container-menu ul li p:nth-of-type(1) {
            margin-top: 10px;
            color: #333333;
        }

        .container-menu ul li p:nth-of-type(2) {
            color: #ff6700;
        }

        #four li img {
            width: 160px;
            height: 110px;
        }
        /*顶部导航栏固定*/
        .nav-bar{
            width:100%;
            height:50px;
            position: absolute;
            /*margin-top:15px;*/
            top:140px;
            opacity: 0.9;
            line-height: 50px;
            background-color: #f5f5f5;
            z-index: 9999;
        }
        .nav-bar-container{
            width:1226px;
            height:50px;
            margin:0 auto;
        }
        .nav-bar-title{
            float: left;
            height:50px;
        }
        .nav-bar-title span{
            font-size: 18px;
            color:#424242;
        }
        .nav-bar-right{
            height:50px;
            float: right;
        }
        .nav-switch a{
            color: #616161;
            text-decoration: none;
            font-size: 14px;
        }
        .nav-bar-right a:last-child{
            display: inline-block;
            width:120px;
            height:30px;
            background-color: #ff6700;
            line-height: 30px;
            text-align: center;
            color:#fff;
            font-size: 12px;
            text-decoration: none;
        }
        .nav-switch span{
            color: #e0e0e0;
            font-family: sans-serif;
        }
        .nav-switch a:hover{
            color:#ff6700;
        }
        #active{
            color:#ff6700;
        }

        /*最后记得删除*/
        blank{

        }
    </style>
</head>

<body>
<main>
    <header>
        <nav>
            <ul class="top-ul">
                <li class="top-li"><a href="javascript:;">小米商城</a></li>
                <li class="top-li"><a href="javascript:;">MIUI</a></li>
                <li class="top-li"><a href="javascript:;">米聊</a></li>
                <li class="top-li"><a href="javascript:;">游戏</a></li>
                <li class="top-li"><a href="javascript:;">多看阅读</a></li>
                <li class="top-li"><a href="javascript:;">云服务</a></li>
                <li class="top-li"><a href="javascript:;">金融</a></li>
                <li class="top-li"><a href="javascript:;">小米网移动版</a></li>
                <li class="top-li"><a href="javascript:;">问题反馈</a></li>
                <li class="top-li"><a href="javascript:;">Select Region</a></li>
            </ul>
            <div class="top-right">
                <span class="top-right-one">登录</span>
                <span class="top-right-two">注册</span>
                <span class="top-right-three">消息通知</span>
                    <span class="top-right-four"> 购物车( 0 )
                <div class="shop">购物车中还没有商品，赶紧选购吧！</div></span>
            </div>
        </nav>
    </header>
    <!-- 导航栏第二部分 -->
    <div class="content_1">
        <div class="content_1-logo"><img src="./index-images/小米logo.png"></div>
        <div class="content_1-pro"><img src="./index-images/pro.gif"></div>
        <ul class="content_1-ul">
            <li class="content_1-li content_1-select" data-index="1"><a href="javascript:;">小米手机</a></li>
            <li class="content_1-li content_1-select" data-index="2"><a href="javascript:;">红米</a></li>
            <li class="content_1-li content_1-select" data-index="3"><a href="javascript:;">平板 · 笔记本</a></li>
            <li class="content_1-li content_1-select" data-index="4"><a href="javascript:;">电视</a></li>
            <li class="content_1-li content_1-select" data-index="5"><a href="javascript:;">盒子 · 影音</a></li>
            <li class="content_1-li content_1-select" data-index="6"><a href="javascript:;">路由器</a></li>
            <li class="content_1-li content_1-select" data-index="7"><a href="javascript:;">智能硬件</a></li>
            <li class="content_1-li"><a href="javascript:;">服务</a></li>
            <li class="content_1-li"><a href="javascript:;">社区</a></li>
        </ul>
        <div class="content_1-search">
            <input type="text" class="search-input">
            <a class="content_1-search-one" href="javascript:;">红米Pro直降400</a>
            <a class="content_1-search-two" href="javascript:;">人工智能电视</a>
            <div class="content_1-search-p"></div>
            <div class="keyword-search">
                <ul class="keyword-search-list">
                    <li><a href="href:javascript:;">小米手机5<span>约有11件</span></a></li>
                    <li><a href="href:javascript:;">空气净化器2<span>约有1件</span></a></li>
                    <li><a href="href:javascript:;">活塞耳机<span>约有4件</span></a></li>
                    <li><a href="href:javascript:;">小米路由器<span>约有8件</span></a></li>
                    <li><a href="href:javascript:;">移动电源<span>约有21件</span></a></li>
                    <li><a href="href:javascript:;">运动相机<span>约有3件</span></a></li>
                    <li><a href="href:javascript:;">小蚁摄像机<span>约有2件</span></a></li>
                    <li><a href="href:javascript:;">小米体重秤<span>约有1件</span></a></li>
                    <li><a href="href:javascript:;">小米插线板<span>约有13件</span></a></li>
                    <li><a href="href:javascript:;">配件优惠套装<span>约有32件</span></a></li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 导航栏第二部分下拉菜单 -->
    <div class="content_1-menu">
        <div class="container-menu">
            <!-- 第一个 -->
            <ul id="one" style="display: none">
                <li>
                    <div>
                        <a href=""><img src="./index-images/5s-110!160x110.jpg" alt="" /></a>
                    </div>
                    <p>小米5</p>
                    <p>1999元起</p>
                </li>
                <li>
                    <div>
                        <a href=""><img src="./index-images/5splus-220!160x110.jpg" alt="" /></a>
                    </div>
                    <p>小米5s Plus </p>
                    <p>2299元</p>
                </li>
                <li>
                    <div>
                        <a href=""><img src="./index-images/mi5!160x110.jpg" alt="" /></a>
                    </div>
                    <p>小米手机5 </p>
                    <p>1599元起</p>
                </li>
                <li>
                    <div class="last">
                        <a href=""><img src="./index-images/maxdingbu!160x110.jpg" alt="" /></a>
                    </div>
                    <p>小米Max</p>
                    <p>1299元起
                    <p>
                </li>
            </ul>
            <!-- 第二个 -->
            <ul id="two" style="display: none">
                <li>
                    <div>
                        <a href=""><img src="./index-images/hongmipro-320!160x110.jpg" alt="" /></a>
                    </div>
                    <p>红米Pro</p>
                    <p>1099元起</p>
                </li>
                <li>
                    <div>
                        <a href=""><img src="./index-images/hongminote4!160x110.jpg" alt="" /></a>
                    </div>
                    <p>红米Note4 </p>
                    <p>899元</p>
                </li>
                <li>
                    <div>
                        <a href=""><img src="./index-images/hongmi3s!160x110.jpg" alt="" /></a>
                    </div>
                    <p>红米Note3 </p>
                    <p>799元起</p>
                </li>
                <li>
                    <div>
                        <a href=""><img src="./index-images/note3!160x110.jpg" alt="" /></a>
                    </div>
                    <p>红米手机3s</p>
                    <p>699元起
                    <p>
                </li>
                <li>
                    <div class="last">
                        <a href=""><img src="./index-images/320-220!160x110.jpg" alt="" /></a>
                    </div>
                    <p>红米手机3x</p>
                    <p>799元起
                    <p>
                </li>
            </ul>
            <!-- 第三个 -->
            <ul id="three" style="display: none">
                <li>
                    <div>
                        <a href=""><img src="./index-images/mipad2-16!160x110.jpg" alt="" /></a>
                    </div>
                    <p>小米平板2#X300016GB</p>
                    <p>999元起</p>
                </li>
                <li>
                    <div>
                        <a href=""><img src="./index-images/mipad2-16!160x110.jpg" alt="" /></a>
                    </div>
                    <p>小米平板2 32GB </p>
                    <p>1299元</p>
                </li>
                <li>
                    <div>
                        <a href=""><img src="./index-images/mipad2-64-win!160x110.jpg" alt="" /></a>
                    </div>
                    <p>小米平板2 64GB Window版</p>
                    <p>12599元起</p>
                </li>
                <li>
                    <div>
                        <a href=""><img src="./index-images/bijiben32012.5!160x110.jpg" alt="" /></a>
                    </div>
                    <p>小米笔记本Air 12.5</p>
                    <p>3499元起
                    <p>
                </li>
                <li>
                    <div class="last">
                        <a href=""><img src="./index-images/bijiben32012.5!160x110.jpg" alt="" /></a>
                    </div>
                    <p>小米笔记本Air 13.3</p>
                    <p>4999元起
                    <p>
                </li>
            </ul>
            <!-- 第四个 -->
            <ul id="four" style="display: none">
                <li>
                    <div>
                        <a href=""><img src="./index-images/101843.png" alt="" /></a>
                    </div>
                    <p>小米电视3s 43英寸</p>
                    <p>1799元</p>
                </li>
                <li>
                    <div>
                        <a href=""><img src="./index-images/101848.png" alt="" /></a>
                    </div>
                    <p>小米电视3s 48英寸</p>
                    <p>1999元</p>
                </li>
                <li>
                    <div>
                        <a href=""><img src="./index-images/101855xin.png" alt="" /></a>
                    </div>
                    <p>小米电视3s 55英寸</p>
                    <p>3499元起</p>
                </li>
                <li>
                    <div>
                        <a href=""><img src="./index-images/101860xin.png" alt="" /></a>
                    </div>
                    <p>小米电视3s 60英寸</p>
                    <p>4499元
                    <p>
                </li>
                <li>
                    <div class="last">
                        <a href=""><img src="./index-images/101865xin.png" alt="" /></a>
                    </div>
                    <p>小米电视3s 65英寸</p>
                    <p>4999元起
                    <p>
                </li>
                <li>
                    <div class="last">
                        <a href=""><img src="./index-images/101865.png" alt="" /></a>
                    </div>
                    <p>查看全部</p>
                    <p>小米电视
                    <p>
                </li>
            </ul>
            <!-- 第五个 -->
            <ul id="five" style="display: none">
                <li>
                    <div>
                        <a href=""><img src="./index-images/hezimini.png" width="160px" height="110px" alt="" /></a>
                    </div>
                    <p>小米盒子mini版</p>
                    <p>179元起</p>
                </li>
                <li>
                    <div>
                        <a href=""><img src="./index-images/hezi3.png" width="160px" height="110px" alt="" /></a>
                    </div>
                    <p>小米盒子3</p>
                    <p>249元</p>
                </li>
                <li>
                    <div>
                        <a href=""><img src="./index-images/hezi3s!160x110.jpg" alt="" /></a>
                    </div>
                    <p>小米盒子3 增强版</p>
                    <p>399元</p>
                </li>
                <li>
                    <div>
                        <a href=""><img src="./index-images/zhuji!160x110.jpg" alt="" /></a>
                    </div>
                    <p>小米电视主机</p>
                    <p>999元
                    <p>
                </li>
                <li>
                    <div class="last">
                        <a href=""><img src="./index-images/jinshuban!160x110.jpg" alt="" /></a>
                    </div>
                    <p>小米家庭音响 金属版</p>
                    <p>899元起
                    <p>
                </li>
                <li>
                    <div class="last">
                        <a href=""><img src="./index-images/putonban!160x110.jpg" alt="" /></a>
                    </div>
                    <p>小米家庭音响 标准版</p>
                    <p>699元
                    <p>
                </li>
            </ul>
            <!-- 第六个 -->
            <ul id="six" style="display:none">
                <li>
                    <div>
                        <a href=""><img src="./index-images/miwifi!160x110.jpg" alt="" /></a>
                    </div>
                    <p>全新小米路由器</p>
                    <p>699元</p>
                </li>
                <li>
                    <div>
                        <a href=""><img src="./index-images/miwifi-3!160x110.png" alt="" /></a>
                    </div>
                    <p>小米路由器 3 1200M</p>
                    <p>149元</p>
                </li>
                <li>
                    <div>
                        <a href=""><img src="./index-images/miwifimini!160x110.jpg" alt="" /></a>
                    </div>
                    <p>小米路由器 mini</p>
                    <p>129元</p>
                </li>
                <li>
                    <div>
                        <a href=""><img src="./index-images/luyouqi3c!160x110.jpg" alt="" /></a>
                    </div>
                    <p>小米路由器 3C 300M</p>
                    <p>99元
                    <p>
                </li>
                <li>
                    <div class="last">
                        <a href=""><img src="./index-images/miwifilite!160x110.jpg" alt="" /></a>
                    </div>
                    <p>小米路由器 青春版</p>
                    <p>79元
                    <p>
                </li>
                <li>
                    <div class="last">
                        <a href=""><img src="./index-images/wifiExtension!160x110.jpg" alt="" /></a>
                    </div>
                    <p>小米WiFi放大器</p>
                    <p>39元
                    <p>
                </li>
            </ul>
            <!-- 第七个 -->
            <ul id="seven" style="display: none">
                <li>
                    <div>
                        <a href=""><img src="./index-images/scooter!160x110.jpg" alt="" /></a>
                    </div>
                    <p>九号平衡车</p>
                    <p>1999元</p>
                </li>
                <li>
                    <div>
                        <a href=""><img src="./index-images/water2!160x110.jpg" alt="" /></a>
                    </div>
                    <p>小米净水器</p>
                    <p>1299元起</p>
                </li>
                <li>
                    <div>
                        <a href=""><img src="./index-images/dianfanbao!160x110.jpg" alt="" /></a>
                    </div>
                    <p>米家压力IH电饭煲</p>
                    <p>999元</p>
                </li>
                <li>
                    <div>
                        <a href=""><img src="./index-images/air2!160x110.jpg" alt="" /></a>
                    </div>
                    <p>小米空气净化器2</p>
                    <p>699元
                    <p>
                </li>
                <li>
                    <div class="last">
                        <a href=""><img src="./index-images/xiaobaishexiangji!160x110.jpg" alt="" /></a>
                    </div>
                    <p>智能摄像机</p>
                    <p>149元起
                    <p>
                </li>
                <li>
                    <div class="last">
                        <a href=""><img src="./index-images/zhinengyingjian!160x110.jpg" alt="" /></a>
                    </div>
                    <p>查看全部</p>
                    <p>智能硬件
                    <p>
                </li>
            </ul>
        </div>
    </div>
    <div class="nav-bar">
        <div class="nav-bar-container">
            <div class="nav-bar-title">
                <span>小米note2</span>
            </div>
            <div class="nav-bar-right">
                    <span class="nav-switch">
                        <a href="javascript:;">概述</a><span>&nbsp|&nbsp</span>
                        <a href="javascript:;" id="active">相机</a><span>&nbsp|&nbsp</span>
                        <a href="javascript:;">图集</a><span>&nbsp|&nbsp</span>
                        <a href="javascript:;">参数</a><span>&nbsp|&nbsp</span>
                        <a href="javascript:;">意外险</a><span>&nbsp|&nbsp</span>
                        <a href="javascript:;">F码通道</a><span>&nbsp&nbsp</span>
                    </span>
                <a href="javascript:;">立即购买</a>
            </div>
        </div>
    </div>
    <div style="width:100%;height:50px"></div>
</main>
</body>

</html>
